<template>
  <div class="editContainer" v-loading="loading">
    <div class="header">
      <div class="header_img">
        <img src="./image/logo.png" alt="" />
      </div>
      <button class="header_btn" @click="toLogin">登录</button>
    </div>
    <div class="means">
      <div class="meansForm">
        <el-form
          class="elForm"
          :rules="rules"
          :model="formData"
          ref="elForm"
          label-width="100px"
        >
          <el-form-item label="编辑征婚资料"></el-form-item>
          <el-form-item label="我的身高" prop="tall">
            <el-input
              type="text"
              placeholder="请输入您的身高"
              v-model="formData.tall"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="我的学历" prop="xueli">
            <el-select v-model="formData.xueli">
              <el-option label="本科" value="bk"></el-option>
              <el-option label="专科" value="zk"></el-option>
              <el-option label="联盟学院" value="lmxy"></el-option>
              <el-option label="硕士" value="ss"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="我的月收入" prop="money">
            <el-select v-model="formData.money">
              <el-option label="1" value="1">1</el-option>
              <el-option label="2" value="2">2</el-option>
              <el-option label="3" value="3">3</el-option>
              <el-option label="4" value="4">4</el-option>
              <el-option label="5" value="5">5</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册账户">
            今天已有
            <a href="javascript:;"> 15120</a>
            位新会员加入珍爱网</el-form-item
          >
          <el-form-item label="我的手机" prop="phone" style="width: 400px">
            <el-input type="text" v-model="formData.phone" />
          </el-form-item>
          <el-form-item label="创建密码" prop="password" style="width: 400px">
            <el-input
              type="password"
              v-model="formData.password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toIndex"
              >同意协议并注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="meansImg">
        <img src="./image/navbar.png" alt="" />
      </div>
    </div>
    <Footer v-if="!$route.meta.isHideFooter" />
  </div>
</template>

<script>
/* import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules"; */
import { reqSumbitInfo } from "@/api/index";
export default {
  name: "Edit",
  data() {
    return {
      percentage: 20,
      loading: false,
      customColor: "#409eff",
      formData: {
        phone: "",
        password: "",
        money: "",
        xueli: "",
        tall: "",
      },
      rules: {
        phone: [
          { required: true, validator: this.validatePhone, trigger: "blur" },
        ],
        password: [
          { required: true, validator: this.validatePass, trigger: "blur" },
        ],
        tall: [{ required: true, message: "请输入身高", trigger: "blur" }],
        xueli: [{ required: true, message: "请选择学历", trigger: "change" }],
        money: [{ required: true, message: "请选择收入", trigger: "change" }],
      },
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      console.log(value);
      if (
        !/^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/.test(
          value
        )
      ) {
        // this.$message.error("手机号码有误，请重填");
        callback("手机号码有误，请重填");
      }
      callback();
    },
    validatePass(rule, value, callback) {
      console.log(rule, value);
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(value)) {
        // this.$message.error("密码包含数字和英文字母，请重填");
        callback("请输入8-16位字母与数字");
      }
      callback();
    },
    toLogin() {
      this.$router.push("./login");
    },
    toIndex() {
      this.$refs.elForm.validate( async (valid) => {
        const { phone, password, money, xueli, tall } = this.formData;
        if (valid) {
          const res = await reqSumbitInfo({ phone, password, money, xueli, tall });
          if(res.data.info === "注册成功"){
            window.localStorage.setItem("cookie",JSON.stringify(res.data.data))
             this.loading = true;
            await setTimeout(() => {
            this.$router.history.replace("/index");
          }, 1000);
          return
          }else if(res.data.info === "用户信息已注册"){
              this.$message.warning('用户已存在，请直接登录')
             await setTimeout(()=>{
                this.$router.replace('/login')
              },1000)
              
              return
          }
          this.$message.success("注册成功，即将跳转首页");
        }else{
          // this.$message.success("提交失败");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.editContainer
  background #F4F4F4
.header
  box-sizing border-box
  width 100%
  height 80px
  display flex
  align-items center
  padding 0 180px
  justify-content space-between
  background #996EF0
  &.active
    background #996EF0
  .header_img
    width 130px
    height 68px
  .header_btn
    width 80px
    height 36px
    color #fff
    font-size 14px
    padding 0 20px
    outline none
    border 1px solid rgb(255, 255, 255)
    height 36px
    line-height 34px
    background transparent
    filter none !important
.means
  width 1200px
  height 3000px
  margin 0 auto
  padding-top 30px
  .elForm
    width 880px
    padding 14px 15px 40px
    background #fff
    margin-right 30px
    color #333
    float left
    opacity 0.7
    font-size 16px
.el-progress-bar__outer
  width 500px !important
</style>
